/* Components */

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.label {
  @apply mb-1 block text-sm font-medium text-gray-900 dark:text-white;
}

.input,
.select {
  @apply block w-full rounded-lg border border-gray-300 bg-transparent 
  p-2 text-sm text-gray-900 focus:border-red-500 focus:ring-red-500 dark:border-gray-600 
  dark:bg-white/5 dark:text-white dark:placeholder-gray-400 dark:ring-white/10
  dark:focus:border-red-500 dark:focus:ring-red-500;
}

.input-invalid {
  @apply border-2 border-red-500 dark:border-red-500;
}

.checkbox {
  @apply h-4 w-4 cursor-pointer rounded border-gray-300 bg-gray-100 text-red-600 focus:ring-2 focus:ring-red-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-red-600;
}

.cm-editor {
  flex: 1;
  height: 100%;
  font-size: 0.75rem;
}

.cm-scroller {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  padding: 1rem;
  padding-bottom: 5rem;
  @apply scrollbar-thin scrollbar-thumb-gray-600;
}

/* Toast */

.toast-viewport {
  --viewport-padding: 25px;
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: var(--viewport-padding);
  gap: 10px;
  width: 390px;
  max-width: 100vw;
  margin: 0;
  list-style: none;
  z-index: 2147483647;
  outline: none;
}

/* Fix for JSX preview */
.cm-padding-fix .cm-scroller {
  padding: 0;
}

.cm-content {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 24px;
}

.editor-btn {
  @apply focus flex items-center gap-1 rounded-lg bg-gray-600/30 px-2 py-1 text-xs 
  font-semibold text-white transition-all duration-200 ease-in-out hover:bg-gray-600/60;
}

#preview-svg svg:not(:hover) {
  outline-style: dashed;
  @apply outline-gray-300;
}

#preview-svg svg {
  margin: auto;
}

.transparent {
  background-color: white;
  background-image:
    linear-gradient(45deg, #ebebeb 25%, transparent 25%),
    linear-gradient(135deg, #ebebeb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ebebeb 75%),
    linear-gradient(135deg, transparent 75%, #ebebeb 75%);
  background-size: 25px 25px; /* Must be a square */
  background-position:
    0 0,
    12.5px 0,
    12.5px -12.5px,
    0px 12.5px; /* Must be half of one side of the square */
}

.white {
  background: white;
}

.black {
  @apply bg-slate-900;
}

.gray {
  @apply bg-gray-200;
}

/* Layout */

.top-bar,
.main-bar {
  @apply text surface flex h-16 shrink-0 items-center gap-x-2 border-b 
  border-gray-200 px-2 dark:border-gray-800 sm:px-6 lg:gap-x-4 lg:px-8;
}

.main-bar {
  @apply h-12;
}

.collection-item {
  @apply text focus flex w-full items-center gap-x-2 rounded-md px-2 py-1 text-sm
  font-normal leading-6 transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-800;
}

.export-label {
  @apply block text-xs;
}

.export-input,
.export-select {
  @apply my-1 block w-full rounded-lg border border-gray-300 
  bg-transparent p-2 text-sm text-gray-900 placeholder:text-gray-500 focus:border-red-500 
  focus:ring-red-500 dark:border-gray-600 dark:bg-white/5 dark:text-white
  dark:placeholder-gray-400 dark:ring-white/10 dark:focus:border-red-500 dark:focus:ring-red-500;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
